<template>
  <div class="w-[1150px] relative print-style bg-white pr-20 h-full">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="formState.lsh" class="w-60 text-right mt-5" />
    </div>
    <div class="text-center text-[22px] font-bold">手术登记单</div>
    <div class="flex-1 mt-5">
      <div class="print-table">
        <div class="print-table-item pl-3 flex items-center h-[60px]">
          <div>{{ formState.brName }}</div>
          <div class="mx-5">{{ formState.brXb }}</div>
          <div>{{ formState.brAge }}</div>
          <div class="mx-5">手机号码：{{ formState.brMob }}</div>
          <div>病案号：{{ formState.lsh }}</div>
        </div>
        <div class="flex items-center">
          <div class="w-3/5 flex">
            <div class="print-table-item w-[120px] h-[60px] flex items-center">手术时间：</div>
            <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.oprTime || '-' }}</div>
          </div>
          <div class="w-2/5 flex items-center h-[60px]">
            <div class="print-table-item w-[120px] h-[60px] flex items-center">手术医生：</div>
            <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.oprEmpName || '-' }}</div>
          </div>
        </div>
        <div class="flex h-[60px]">
          <div class="print-table-item w-[120px] h-[60px] flex items-center">右眼手术：</div>
          <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.odmc || '-' }}</div>
        </div>
        <div class="flex h-[60px]">
          <div class="print-table-item w-[120px] h-[60px] flex items-center">左眼手术：</div>
          <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.osmc || '-' }}</div>
        </div>
        <div class="flex h-[60px]">
          <div class="w-3/5 flex">
            <div class="w-1/2 flex">
              <div class="print-table-item w-[120px] h-[60px] flex items-center">业务员：</div>
              <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.brYwyName || '-' }}</div>
            </div>
            <div class="w-1/2 flex">
              <div class="print-table-item w-[120px] h-[60px] flex items-center">咨询师：</div>
              <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.brZxsName || '-' }}</div>
            </div>
          </div>
          <div class="w-2/5 flex">
            <div class="print-table-item w-[120px] h-[60px] flex items-center">负责人：</div>
            <div class="print-table-item flex-1 h-[60px] flex items-center">{{ formState.brFzrName || '-' }}</div>
          </div>
        </div>
        <div class="flex h-[200px]">
          <div class="print-table-item w-[120px] h-full flex items-center">备注：</div>
          <div class="print-table-item flex-1 h-full flex items-center">{{ formState.cmome || '-' }}</div>
        </div>
      </div>
      <div class="flex justify-end pl-20 mt-10">打印：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const formState = ref({})

watch(
  () => props.printData,
  () => {
    if (props.printData.printData.detail.length > 0) {
      formState.value = props.printData.printData.detail[0]
    }
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  p-1;
}
</style>
